<template>
    <div class="circle-top">
        <div class="background" :style="{ background: `url(${userInfo.cover}) center / cover no-repeat` }" />
        <slot name="topRightIcon" />
        <slot name="topLeftBut" />
        <ul>
            <li>
                <span>{{ userInfo.nickname }}</span>
                <van-image fit="cover" width="5rem" height="5rem" radius=".625rem" :src="userInfo.headImgUrl" />
            </li>
            <li>个性签名</li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: ['userInfo'],
    };
</script>

<style lang="less" scoped>
    .circle-top {
        position: relative;
        margin-bottom: 5rem;
        .background {
            width: 100%;
            height: 12.5rem;
            background: url("../../assets/imges/cat.jpeg") no-repeat center;
            background-size: 100%;
        }
        .icon {
            position: absolute;
            right: 0.625rem;
            top: 0.625rem;
            font-size: 3rem;
            color: aliceblue;
        }
        ul {
            position: absolute;
            right: 20px;
            bottom: -50px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            li {
                &:first-child {
                    display: flex;
                    align-content: flex-start;
                    span {
                        margin: 20px 10px 10px 10px;
                        color: rgb(255, 255, 255);
                    }
                }
            }
        }
    }
</style>
